<template>
  <div
    v-if="searchResults.length > 0 && searchText"
    class="search-results-table"
    @click.stop
  >
    <table class="search-table">
      <thead>
        <tr>
          <th style="text-align: left">药品</th>
          <th style="text-align: left">厂家</th>
          <th style="text-align: left">单价</th>
          <th style="text-align: left">单位</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="result in searchResults"
          :key="result.id"
          class="search-result-row"
          @click="selectSearchResult(result)"
        >
          <td style="text-align: left">{{ result.drugName }}</td>
          <td style="text-align: left">{{ result.mfrName }}</td>
          <td style="text-align: left">¥ {{ result.priceNum }}</td>
          <td style="text-align: left">{{ result.packUnitText }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
interface SearchResult {
  id: string | number;
  drugName: string;
  specification: string;
  mfrId: string;
  price: number | string;
  packUnitText: string;
}

const props = defineProps<{
  searchResults: any[];
  searchText: string;
}>();
const emit = defineEmits(['select']);
const selectSearchResult = (result: any) => {
  emit('select', result);
};
</script>

<style scoped>
.search-results-table {
  /* position: absolute; */
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9998;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}
.search-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.search-table th {
  background: #f8f8f8;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  padding-left: 25px;
  height: 44px;
  border-bottom: 1px solid #f5f7fa;
}
.search-table td {
  font-size: 14px;
  color: #333;
  height: 48px;
  padding-left: 25px;
  border-bottom: 1px solid #f5f7fa;
  background: #fff;
}
.search-result-row:last-child td {
  border-bottom: none;
}
.search-result-row {
  cursor: pointer;
  transition: background-color 0.2s;
}
.search-result-row:hover {
  background-color: #f0f9ff;
}
</style>
